<template>
    <el-dialog  v-model="showDialog" title="会话记录" width="70%" @close="close" >
        <el-row>
        <el-col :span="12">
        <div>
            <!--消息框-->
            <div class ="msgArea" ref="msgAreas" style="height:calc(100vh - 315px); overflow:auto; border: 1px solid #ccc;
                        border-radius: 5px;background-color: #f5f5f5">
                <Messages :msgs="chat.msgs"  showAt="agent"/>
            </div>
        </div>
        </el-col>
        <el-col :span="12">
            <ServiceTicket :show="showDialog" :chatId="props.chatId"/>
        </el-col>
        </el-row>
    </el-dialog>
</template>

<script  setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import request from '@/utils/request.js'
    import ServiceTicket from '@/components/business/ServiceTicket.vue'
    import Messages from '@/components/common/Messages.vue'
    import { ElMessage } from 'element-plus'
    import moment from 'moment'
    let props = defineProps(['chatId'])
    let showDialog = ref(false)
    let chat = reactive({msgs:[]})

    function open() {
        if(showDialog.value === true){
            request.get(`/api/chat/getChatMessages/${props.chatId}`).then(resp => {
                chat.msgs = resp;
            })
        }else{
            chat.msgs = [];
        }
    }

    function close(){
        showDialog.value = false
    }
    defineExpose({showDialog})
</script>
<style>
    .msgArea::-webkit-scrollbar {
        width: 4px;
    }
    .msgArea::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: fade(@primary-color, 60%);
    }
    .msgArea::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: fade(@primary-color, 30%);
    }
</style>
